<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<view class="card-box space-between plr20">
			<view class="smll">
				<u-icon name="calendar"  size="40"></u-icon>
				<text class="ml10 fs28 ">日期</text>
			</view>
			<view>
				<view class="calendar_box b-tottom bg-white" @click="show=true">
					<view class="text fs28">{{calendarText}}
						<u-icon class="ml10" name="arrow-right" size="20"></u-icon>
					</view>
				</view>
				<u-calendar v-model="show" ref="calendar" @change="changeCalendar" :mode="mode" :start-text="startText" :end-text="endText"
				 :btn-type="btnType" :mask-close-able="false">
				</u-calendar>
			</view>
		</view>
		<!-- <view @click="showSelect=true" class="card-box space-between plr20">
			<view class="smll">
				<u-icon name="calendar"  size="40"></u-icon>
				<text class="ml10 fs28 ">类型</text>
			</view>
			<view>
				<view class="calendar_box b-tottom bg-white">
					<view class="text fs28">{{title}}
						<u-icon class="ml10" name="arrow-right" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view> -->

		<u-row class="gridbox" gutter="20">
			<u-col span="6">
				<view class="card-item">
					<view class="price fs40 ff"><text v-if="pageType == 'balance'" class="fs24">￥</text>{{income}}</view>
					<view class="text fs28 color-99">收入</view>
				</view>
			</u-col>
			<u-col span="6">
				<view class="card-item" >
					<view class="price fs40 ff"><text v-if="pageType == 'balance'" class="fs24">￥</text>{{outlay}}</view>
					<view class="text fs28 color-99">支出</view>
				</view>
			</u-col>
		</u-row>

		<view class="card-box list_box">
			<view class="title b-tottom p30" @click="showSelectBox=true">
				{{searchText}}
				<u-icon class="u-icon" name="arrow-down" size="20"></u-icon>
			</view>
			<view v-if="showSelectBox" class="select_box">
				<view class="mask-box" @click="showSelectBox=false"></view>
				<view class="u-grid-box">
					<u-grid :col="3" :border="false">
						<u-grid-item @click="selectChange('all','全部')">
							<view class="w100 b-right">
								<view class="img">
									<u-image src="/static/public/images/icon_04.png" mode="widthFix"></u-image>
								</view>
								<text>全部</text>
							</view>
						</u-grid-item>
						<u-grid-item @click="selectChange('income','收入')">
							<view class="w100 b-right">
								<view class="img">
									<u-image src="/static/public/images/icon_05.png" mode="widthFix"></u-image>
								</view>
								<text>收入</text>
							</view>
						</u-grid-item>
						<u-grid-item @click="selectChange('outlay','支出')">
							<view class="w100 b-right">
								<view class="img">
									<u-image src="/static/public/images/icon_06.png" mode="widthFix"></u-image>
								</view>
								<text>支出</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
				<!-- 空白页 -->
				<empty v-if="itemList.length === 0"></empty>
				<!-- 列表 -->
				<view v-for="(item,index) in itemList" :key="index" class="item b-tottom">
					<view v-if="pageType == 'score'">
						<view v-if="item.use_integral>0" class="money income"><text>+</text>{{item.use_integral}}</view>
						<view v-else class="money">{{item.use_integral}}</view>
					</view>
					<view v-else-if="pageType == 'bean'">
						<view v-if="item.bean_value>0" class="money income"><text>+</text>{{item.bean_value}}</view>
						<view v-else class="money">{{item.bean_value}}</view>
					</view>
					<view v-else-if="pageType == 'integral'">
						<view v-if="item.bean_value>0" class="money income"><text>+</text>{{item.integral_money}}</view>
						<view v-else class="money">{{item.integral_money}}</view>
					</view>
					<view v-else>
						<view v-if="item.balance_money>0" class="money income"><text>+</text>{{item.balance_money}}</view>
						<view v-else class="money">{{item.balance_money}}</view>
					</view>
					<view class="info">
						<text class="fs28">{{item.change_desc}}</text>
						<text class="fs26 color-99 mt10">{{item.change_time}}</text>
						<text v-if="item.from_uid > 0" class="fs26 color-99 mt10">来源会员：{{item.from_uid}}</text>   
					</view>
				</view>

				<uni-load-more :status="loadingType"></uni-load-more>

			</scroll-view>
		</view>
		
		<u-select  @confirm="confirm" v-model="showSelect" :list="list"></u-select>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				showSelect:false,
				list: [{
						value: 'balance',
						label: '账户积分'
					},
					{
						value: 'integral',
						label: '购物分'
					}
				],
				title:'账户积分',
				calendarText: '',
				show: false,
				mode: 'range',
				result: "请选择日期",
				startText: '开始',
				endText: '结束',
				btnType: 'primary',
				startDate: '',
				endDate: '',
				searchText: '全部',
				pageType:'',
				param: {
					pageType:'',
					calendar: '',
					searchType: 'all',
					p: 0
				},
				income: 0.00,
				outlay: 0.00,
				showSelectBox: false,
				itemList: [],
				loadingType: 'more'
			}
		},
		onLoad(options) {
			this.pageType = options.pageType;
			let title = '积分明细';
			if (this.pageType == 'score'){
				title = '冻积分明细';
			}else if (this.pageType == 'bean'){
				title = '扶持基金明细';
			}
			uni.setNavigationBarTitle({
			　　title:title
			})
			this.loadData();
			uni.setNavigationBarTitle({
			　　title:res.data.storeName
			})
		},
		onShow() {
			this.app.isLogin(this); //强制登陆
		},
		onReady() {},
		methods: {
			confirm(v){
				this.title =v[0].label
				this.pageType =v[0].value
				
					this.searchText = text;
					this.showSelectBox = false;
					this.param.searchType = this.pageType;
					this.param.p = 0;
					this.itemList = [];
					this.loadingType = 'more';
			this.loadData();
			},
			selectChange(type, text) {
				this.searchText = text;
				this.showSelectBox = false;
				this.param.searchType = type;
				this.param.p = 0;
				this.itemList = [];
				this.loadingType = 'more';
				this.loadData('change');
			},
			changeCalendar(e) {
				this.calendarText = e.startDate + "~" + e.endDate;
				this.param.calendar = this.calendarText;
				this.selectChange('all', '全部');
			},
			loadData(source) {
				if (source != 'change' && this.loadingType == 'nomore') {
					return;
				}
				this.param.p++;
				this.param.pageType = this.pageType;
				this.loadingType = 'loading';
				this.$u.post('member/api.wallet/getAccountLog', this.param).then(res => {
					this.itemList = this.itemList.concat(res.data.list);
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(this.itemList, 'loaded', true);
					//判断是否还有下一页，有是more  没有是nomore
					this.loadingType = this.param.p == res.data.page_count ? 'nomore' : 'more';
					if (this.param.searchType == 'all' && this.param.p == 1) {
						this.income = res.data.income;
						this.outlay = res.data.outlay;
					}
					if (this.calendarText == '') {
						this.calendarText = res.data.startDate + '~' + res.data.endDate;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.card-box {
		border-radius: 20rpx;
		margin: 20rpx;
		background-color: #FFFFFF;
	}

	.img44 {
		width: 44rpx;
		height: 44rpx;
	}

	.calendar_box {
		display: flex;
		align-items: center;
		height: 100rpx;

		.text {
			width: 100%;
			text-align: center;
			
		}
	}

	.gridbox {
		margin: 20rpx 15rpx;

		.card-item {
			background-color: #ffffff;
			box-shadow: 0px 10rpx 15rpx 0px rgba(188, 188, 188, 0.1);
			border-radius: 20rpx;
			text-align: center;
			padding: 60rpx 0;
		}
	}

	.top_static {
		text-align: center;

		.price {
			font-size: 35rpx;
			font-weight: 700;

			text {
				font-size: 28rpx;
			}
		}

		.text {
			color: $font-color-light;
		}
	}

	.list_box {
		height: calc(100vh - 260rpx);

		.title {
			align-items: center;
			font-size: 28rpx;
			border-bottom: 1rpx solid $border-color-light;

			.u-icon {
				float: right;
				margin-top: 10rpx;
			}
		}

		.select_box {
			position: absolute;
			left: 0;
			right: 0;
			height: calc(100vh - 110rpx);

			.u-grid-box {
				position: absolute;
				top: 0rpx;
				z-index: 99;
				text-align: center;
				background-color: #FFFFFF;
				padding-top: 10rpx;
				width: 100%;
				height: 120rpx;

				.img {
					width: 50rpx;
					height: 50rpx;
					margin: 0rpx auto;
					margin-bottom: 10rpx;
				}
			}

		}

		.list-scroll-content {
			position: relative;
			height: calc(100vh - 380rpx);

			.item {
				padding: 20rpx;

				.info {
					font-size: 28rpx;
					text {
						display: block;
					}
				}

				.money {
					float: right;
					font-size: 28rpx;
					margin-top: 20rpx;
					color: $font-color-red;
				}

				.income {
					color: $font-color-green;
				}
			}
		}
	}
</style>
